<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index-css.css" type="text/css"/>
    <link rel="stylesheet" href="bootstrap-3/bootstrap-3.3.7-dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" type="text/css"/>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="Font-Awesome-3/Font-Awesome-3.2.1/css/font-awesome.css" type="text/css"/>
    <link rel="stylesheet" href="Font-Awesome-3/Font-Awesome-3.2.1/css/font-awesome.min.css" type="text/css"/>
    <title>首页</title>
</head>
<body>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header1">

            <a class="navbar-brand" href="#">
                <i class="glyphicon glyphicon-heart"></i>
                <span class="hidden-phone hidden-xs">Flatty</span>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a class="glyphicon glyphicon-menu-hamburger" href="#">
                        <!--<i class="icon-reorder"></i>-->
                    </a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <button class="glyphicon glyphicon-search" name="button" type="submit"></button>
                            <input type="text" class="form-control" value="Search...">
                        </div>
                    </form>
                </li>
                <li class="item-bc">
                    <a class="glyphicon glyphicon-adjust dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#"></a>
                    <ul class="dropdown-menu">
                        <li class="item-color">Body color</li>
                        <li><a href="#">
                            Light
                            <small>(default)</small>
                        </a></li>
                        <li><a href="#">
                            Dark
                        </a></li>
                        <li><a href="#">
                            Dark blue
                        </a></li>
                        <li role="separator" class="divider"></li>
                        <li class="item-color">Contrast color</li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Red
                            <small>(default)</small>
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Blue
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Orange
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Purple
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Green
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Muted
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Facebook
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Dark
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Pink
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Grass green
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Sea blue
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Banana
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Dark orange
                        </a></li>
                        <li><a href="#">
                            <i class="glyphicon glyphicon-adjust"></i>
                            Brown
                        </a></li>
                    </ul>

                </li>
                <li class="item-bc1"><a href="#"><i class="fa fa-feed"></i><span class="badge">5</span></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="img/avatar.jpg">  Mila Kunis <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">
                            <i class="glyphicon glyphicon-user"></i>
                            Profile
                        </a></li>
                        <li><a href="#">
                            Settings
                        </a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">
                            Sign out
                        </a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="content">
    <div class="content-left">
        <ul class="left-list">
            <li class="list-item">
                <a href="index.html">
                    <i class="icon-dashboard"></i>
                    <span class="list-item-font">Dashboard</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-edit"></i>
                    <span class="list-item-font">Forms</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form styles and features</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form components</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Validations.html">
                            <i class="icon-caret-right"></i>
                            <span>Validations</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Wizard.html">
                            <i class="icon-caret-right"></i>
                            <span>Wizard</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-tint"></i>
                    <span class="list-item-font">UI Elements & Widgets</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>UI Elements</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Widgets.html">
                            <i class="icon-caret-right"></i>
                            <span>Widgets</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="buttons-and-icon.html">
                    <i class="icon-star"></i>
                    <span class="list-item-font">Buttons & Icons</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cogs"></i>
                    <span class="list-item-font">Components</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="chart.html">
                            <i class="icon-bar-chart"></i>
                            <span>Charts</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-envelope"></i>
                            <span>Address book</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Chats.html">
                            <i class="icon-comments"></i>
                            <span>Chats</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-pencil"></i>
                            <span>In-place editing</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-list-ul"></i>
                            <span>File trees</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Fileupload.html">
                            <i class="icon-file"></i>
                            <span>Fileupload</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Todo-list.html">
                            <i class="icon-list-alt"></i>
                            <span>Todo list</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="WYSIWYG.html">
                            <i class="icon-paste"></i>
                            <span>WYSIWYG</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="Tables.html">
                    <i class="icon-table"></i>
                    <span class="list-item-font">Tables</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-th"></i>
                    <span class="list-item-font">Grid</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-font"></i>
                    <span class="list-item-font">Typography</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-calendar"></i>
                    <span class="list-item-font">Calendar</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-book"></i>
                    <span class="list-item-font">Example pages</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-money"></i>
                            <span>Invoice</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-picture"></i>
                            <span>Gallery</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-time"></i>
                            <span>Timeline</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-table"></i>
                            <span>Pricing tables</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-user"></i>
                            <span>User profile</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-question-sign"></i>
                            <span>404 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-cogs"></i>
                            <span>500 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-signin"></i>
                            <span>Sign in</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-bullhorn"></i>
                            <span>FAQ</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-inbox"></i>
                            <span>Orders</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-search"></i>
                            <span>Search results</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-circle-blank"></i>
                            <span>Blank page</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cog"></i>
                    <span class="list-item-font">Layouts</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Closed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed header</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation & header</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-mail-reply"></i>
                    <span class="list-item-font">Email templates</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-folder-open-alt"></i>
                    <span class="list-item-font">Four level dropdown</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span class="list-item-font">Second level</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item"></li>
        </ul>
    </div>

    <div class="content-right">
        <div class="right-top">
            <h1>
                <i class="icon-dashboard"></i>
                <span class="list-item-font">Dashboard</span>
            </h1>
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Last month</button>
                <button type="button" class="btn btn-default">Last week</button>
                <button type="button" class="btn btn-default">Today</button>

                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="icon-calendar"></i>
                        Custom
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li class="menu-item">Custom Range</li>
                        <li>
                            <div class="menu-left">
                                <label>From</label>
                                <input type="text" value=""/>
                            </div>
                            <div class="menu-left">
                                <label>To</label>
                                <input type="text" value=""/>
                            </div>
                            <button type="button" class="menu-btn1">Submit</button>
                            <button type="button" class="menu-btn2">Clear</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            Welcome to
            <strong>Flatty (v2)</strong>
            - I hope you'll like it. Don't forget - you can change theme color in top right corner
            <i class="icon-adjust"></i>
            if you want.
        </div>

        <div class="right-tab">
            <div class="tab">
                <a href="#">
                    <div class="tab-color1"><i class="icon-comments"></i></div>
                    <div>Comments</div>
                </a>
            </div>
            <div class="tab">
                <a href="#">
                    <div class="tab-color2"><i class="icon-star"></i></div>
                    <div>Veeeery long title of this quick link</div>
                </a>
            </div>
            <div class="tab">
                <a href="#">
                    <div class="tab-color3"><i class="icon-magic"></i></div>
                    <div>Magic</div>
                </a>
            </div>
            <div class="tab">
                <a href="#">
                    <div class="tab-color4"><i class="icon-eye-open"></i></div>
                    <div>Show</div>
                </a>
            </div>
            <div class="tab">
                <a href="#">
                    <div class="tab-color5"><i class="icon-inbox"></i></div>
                    <div>Orders</div>
                </a>
            </div>
            <div class="tab">
                <a href="#">
                    <div class="tab-color6"><i class="icon-refresh"></i></div>
                    <div>Spinning</div>
                </a>
            </div>
        </div>

        <div class="aside">
            <div class="aside-left left-remove">
                <div class="aside-left-top">
                    <div>
                        <i class="icon-inbox"></i>
                        Orders
                    </div>
                    <div>
                        <a class="remove1" href="#remove1"><i class="icon-remove"></i></a>
                        <a class="chevron1" href="#chevron1"><i class="icon-chevron-up"></i></a>
                    </div>
                </div>
                <div id="plug1"></div>
            </div>
            <div class="aside-right right-remove">
                <div class="aside-left-top">
                    <div>
                        <i class="icon-group"></i>
                        Users
                    </div>
                    <div>
                        <a class="remove2" href="#remove2"><i class="icon-remove"></i></a>
                        <a class="chevron2" href="#chevron2"><i class="icon-chevron-up"></i></a>
                    </div>
                </div>
                <div id="plug2"></div>
            </div>
        </div>
        <hr>
        <div class="title">
            <div class="title-left">
                <div class="title-left-top">
                    <div>
                        <i class="icon-inbox"></i>
                        Orders
                    </div>
                    <div>
                        <a class="remove3" href="#remove3"><i class="icon-remove"></i></a>
                        <a class="chevron3" href="#chevron3"><i class="icon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="title-left-dis">
                    <div class="title-tab">
                        <div class="title-tab-box">
                            <h1 class="box-color-red">191</h1>
                            <small>New</small>
                            <div class="icon-inbox icon-color-red icon-size"></div>
                        </div>
                        <div class="title-tab-box">
                            <h1 class="box-color-gold">311</h1>
                            <small>In process</small>
                            <div class="icon-check icon-color-gold icon-size"></div>
                        </div>
                        <div class="title-tab-box">
                            <h1 class="box-color-purple">3</h1>
                            <small>Pending</small>
                            <div class="icon-time icon-color-purple icon-size"></div>
                        </div>
                    </div>
                    <div class="title-tab">
                        <div class="title-tab-box">
                            <h1 class="box-color-blue">3</h1>
                            <small>Shipped</small>
                            <div class="icon-truck icon-color-blue icon-size"></div>
                        </div>
                        <div class="title-tab-box">
                            <h1 class="box-color-green">981</h1>
                            <small>Completed</small>
                            <div class="icon-flag icon-color-green icon-size"></div>
                        </div>
                        <div class="title-tab-box">
                            <h1 class="box-color-gray">0</h1>
                            <small>Canceled</small>
                            <div class="icon-remove icon-color-gray icon-size"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="title-center">
                <div class="title-center-top">
                    <div>
                        <i class="icon-group"></i>
                        Visitors
                    </div>
                    <div>
                        <a class="remove4" href="#remove4"><i class="icon-remove"></i></a>
                        <a class="chevron4" href="#chevron4"><i class="icon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="title-center-dis">
                    <div class="title-tab">
                        <div class="title-tab-box">
                            <h1 class="box-color-red">9100</h1>
                            <small>Unique</small>
                            <div class="icon-user icon-color-red icon-size"></div>
                        </div>
                        <div class="title-tab-box">
                            <h1 class="box-color-gold">41 000</h1>
                            <small>Pageviews</small>
                            <div class="icon-book icon-color-gold icon-size"></div>
                        </div>
                        <div class="title-tab-box">
                            <h1 class="box-color-blue">12:21</h1>
                            <small>Average time</small>
                            <div class="icon-time icon-color-blue icon-size"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="title-right">
                <div class="title-right-top">
                    <div>
                        <i class="icon-comments"></i>
                        Comments
                    </div>
                    <div>
                        <a class="remove5" href="#remove5"><i class="icon-remove"></i></a>
                        <a class="chevron5" href="#chevron5"><i class="icon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="title-right-dis">
                    <div class="title-tab">
                        <div class="title-tab-box">
                            <h1 class="box-color-red">91</h1>
                            <small>New</small>
                            <div class="icon-plus icon-color-red icon-size"></div>
                        </div>
                        <div class="title-tab-box">
                            <h1 class="box-color-green">1</h1>
                            <small>Approved</small>
                            <div class="icon-ok icon-color-green icon-size"></div>
                        </div>
                        <div class="title-tab-box">
                            <h1 class="box-color-purple">123</h1>
                            <small>Pending</small>
                            <div class="icon-time icon-color-purple icon-size"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <hr>

        <div class="jumbotron">
            <h2>Todo & Recent activity</h2>
            <small>Items in todo list can be reordered by drag & drop, you can mark them as important, complete, or you can delete them!</small>
        </div>

        <div class="aside">
            <div class="aside-left aside-hide1">
                <div class="aside-left-top">
                    <div>
                        <i class="icon-list-alt"></i>
                        Todo lists
                    </div>
                    <div>
                        <a class="remove6" href="#remove6"><i class="icon-remove"></i></a>
                        <a class="chevron6" href="#chevron6"><i class="icon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="aside-border">
                    <div class="input-group">
                        <input type="text" class="form-control" aria-label="..." placeholder="Type your new todo here...">
                        <div class="input-group-btn">
                            <button class="btn btn-success"><i class="icon-plus"></i></button>
                        </div>
                    </div>
                    <div class="date text-contrast">Today</div>
                    <ul class="ui-sortable" data-sortable-axis="y" data-sortable-connect=".sortable">
                        <li class="item done">
                            <label class="check pull-left todo">
                                <input type="checkbox">
                                Voluptas voluptas consequatur omnis nisi.
                            </label>
                            <div class="actions pull-right">
                                <a class="btn btn-link edit has-tooltip" href="#">
                                    <i class="icon-pencil"></i>
                                </a>
                                <a class="btn btn-link remove has-tooltip" href="#">
                                    <i class="icon-remove"></i>
                                </a>
                                <a class="btn btn-link important has-tooltip" href="#">
                                    <i class="icon-bookmark-empty"></i>
                                </a>
                            </div>
                        </li>
                        <li class="item">
                            <label class="check pull-left todo">
                                <input type="checkbox">
                                Voluptas voluptas consequatur omnis nisi.
                            </label>
                            <div class="actions pull-right">
                                <a class="btn btn-link edit has-tooltip" data-placement="top" href="#" title="" data-original-title="Edit todo">
                                    <i class="icon-pencil"></i>
                                </a>
                                <a class="btn btn-link remove has-tooltip" data-placement="top" href="#" title="" data-original-title="Remove todo">
                                    <i class="icon-remove"></i>
                                </a>
                                <a class="btn btn-link important has-tooltip" data-placement="top" href="#" title="" data-original-title="Mark as important">
                                    <i class="icon-bookmark-empty"></i>
                                </a>
                            </div>
                        </li>
                        <li class="item">
                            <label class="check pull-left todo">
                                <input type="checkbox">
                                Odit veniam occaecati fugit.
                            </label>
                            <div class="actions pull-right">
                                <a class="btn btn-link edit has-tooltip" data-placement="top" href="#" title="" data-original-title="Edit todo">
                                    <i class="icon-pencil"></i>
                                </a>
                                <a class="btn btn-link remove has-tooltip" data-placement="top" href="#" title="" data-original-title="Remove todo">
                                    <i class="icon-remove"></i>
                                </a>
                                <a class="btn btn-link important has-tooltip" data-placement="top" href="#" title="" data-original-title="Mark as important">
                                    <i class="icon-bookmark-empty"></i>
                                </a>
                            </div>
                        </li>
                        <li class="done item">
                            <label class="check pull-left todo">
                                <input checked="checked" type="checkbox">
                                Ad aliquid voluptas labore magnam et ut.
                            </label>
                            <div class="actions pull-right">
                                <a class="btn btn-link edit has-tooltip" data-placement="top" href="#" title="" data-original-title="Edit todo">
                                    <i class="icon-pencil"></i>
                                </a>
                                <a class="btn btn-link remove has-tooltip" data-placement="top" href="#" title="" data-original-title="Remove todo">
                                    <i class="icon-remove"></i>
                                </a>
                                <a class="btn btn-link important has-tooltip" data-placement="top" href="#" title="" data-original-title="Mark as important">
                                    <i class="icon-bookmark-empty"></i>
                                </a>
                            </div>
                        </li>
                        <li class="item">
                            <label class="check pull-left todo">
                                <input type="checkbox">
                                <i class="icon-envelope-alt"></i>
                                Vel velit fuga dolorum earum rem.
                            </label>
                            <div class="actions pull-right">
                                <a class="btn btn-link edit has-tooltip" data-placement="top" href="#" title="Edit todo">
                                    <i class="icon-pencil"></i>
                                </a>
                                <a class="btn btn-link remove has-tooltip" data-placement="top" href="#" title="" data-original-title="Remove todo">
                                    <i class="icon-remove"></i>
                                </a>
                                <a class="btn btn-link important has-tooltip" data-placement="top" href="#" title="" data-original-title="Mark as important">
                                    <i class="icon-bookmark-empty"></i>
                                </a>
                            </div>
                        </li>
                    </ul>
                    <div class="date text-contrast">Due Wed, Sep 19, 2013</div>
                    <ul class="unstyled sortable ui-sortable" data-sortable-axis="y" data-sortable-connect=".sortable">
                        <li class="item">
                            <label class="check pull-left todo">
                                <input type="checkbox">
                                Qui pariatur eum ex impedit.
                            </label>
                            <div class="actions pull-right">
                                <a class="btn btn-link edit has-tooltip" data-placement="top" href="#" title="" data-original-title="Edit todo">
                                    <i class="icon-pencil"></i>
                                </a>
                                <a class="btn btn-link remove has-tooltip" data-placement="top" href="#" title="" data-original-title="Remove todo">
                                    <i class="icon-remove"></i>
                                </a>
                                <a class="btn btn-link important has-tooltip" data-placement="top" href="#" title="" data-original-title="Mark as important">
                                    <i class="icon-bookmark-empty"></i>
                                </a>
                            </div>
                        </li>
                        <li class="important item">
                            <label class="check pull-left todo">
                                <input type="checkbox">
                                Illo aut officiis eum mollitia voluptatibus.
                            </label>
                            <div class="actions pull-right">
                                <a class="btn btn-link edit has-tooltip" data-placement="top" href="#" title="Edit todo">
                                    <i class="icon-pencil"></i>
                                </a>
                                <a class="btn btn-link remove has-tooltip" data-placement="top" href="#" title="" data-original-title="Remove todo">
                                    <i class="icon-remove"></i>
                                </a>
                                <a class="btn btn-link important has-tooltip" data-placement="top" href="#" title="" data-original-title="Mark as important">
                                    <i class="icon-bookmark-empty"></i>
                                </a>
                            </div>
                        </li>
                        <li class="item">
                            <label class="check pull-left todo">
                                <input type="checkbox">
                                In et rerum ipsam.
                            </label>
                            <div class="actions pull-right">
                                <a class="btn btn-link edit has-tooltip" data-placement="top" href="#" title="" data-original-title="Edit todo">
                                    <i class="icon-pencil"></i>
                                </a>
                                <a class="btn btn-link remove has-tooltip" data-placement="top" href="#" title="" data-original-title="Remove todo">
                                    <i class="icon-remove"></i>
                                </a>
                                <a class="btn btn-link important has-tooltip" data-placement="top" href="#" title="" data-original-title="Mark as important">
                                    <i class="icon-bookmark-empty"></i>
                                </a>
                            </div>
                        </li>
                        <li class="item">
                            <label class="check pull-left todo">
                                <input type="checkbox">
                                Asperiores sed praesentium assumenda recusandae ea.
                            </label>
                            <div class="actions pull-right">
                                <a class="btn btn-link edit has-tooltip" data-placement="top" href="#" title="" data-original-title="Edit todo">
                                    <i class="icon-pencil"></i>
                                </a>
                                <a class="btn btn-link remove has-tooltip" data-placement="top" href="#" title="Remove todo">
                                    <i class="icon-remove"></i>
                                </a>
                                <a class="btn btn-link important has-tooltip" data-placement="top" href="#" title="" data-original-title="Mark as important">
                                    <i class="icon-bookmark-empty"></i>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="aside-right aside-hide2">
                <div class="aside-left-top">
                    <div>
                        <i class="icon-refresh"></i>
                        Recent activity
                    </div>
                    <div>
                        <a class="remove7" href="#remove7"><i class="icon-remove"></i></a>
                        <a class="chevron7" href="#chevron7"><i class="icon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="aside-close">
                    <ul class="nav nav-tabs">
                        <li class="man" role="presentation">
                            <a href="#users">
                                <i class="icon-user icon-color-green"></i>
                                Users
                            </a>
                            <div class="line-green"></div>
                            <ul class="unstyled users list-hover list-striped">
                                <li>
                                    <div class="avatar pull-left">
                                        <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                                    </div>
                                    <div class="action pull-left">
                                        <a href="#" class="text-contrast">Guadalupe Ward</a>
                                        signed up
                                    </div>
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </li>
                                <li>
                                    <div class="avatar pull-left">
                                        <div class="icon-user"></div>
                                    </div>
                                    <div class="action pull-left">
                                        <a href="#" class="text-contrast">Emerson Weissnat II</a>
                                        commented
                                    </div>
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </li>
                                <li>
                                    <div class="avatar pull-left">
                                        <div class="icon-user"></div>
                                    </div>
                                    <div class="action pull-left">
                                        <a href="#" class="text-contrast">Elody O'Keefe</a>
                                        signed in
                                    </div>
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </li>
                                <li>
                                    <div class="avatar pull-left">
                                        <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                                    </div>
                                    <div class="action pull-left">
                                        <a href="#" class="text-contrast">Joana Zboncak</a>
                                        uploaded photo
                                    </div>
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </li>
                                <li>
                                    <div class="avatar pull-left">
                                        <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                                    </div>
                                    <div class="action pull-left">
                                        <a href="#" class="text-contrast">Zander Turner</a>
                                        signed in
                                    </div>
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </li>
                                <li>
                                    <div class="avatar pull-left">
                                        <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                                    </div>
                                    <div class="action pull-left">
                                        <a href="#" class="text-contrast">Miss Price Reynolds</a>
                                        commented
                                    </div>
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </li>
                            </ul>
                        </li>
                        <li class="new" role="presentation">
                            <a href="#comments">
                                <i class="icon-comments icon-color-purple"></i>
                                Comments
                            </a>
                            <div class="line-purple"></div>
                            <ul class="unstyled comments list-hover list-striped">
                                <li>
                                    <div class="avatar pull-left">
                                        <div class="icon-user"></div>
                                    </div>
                                    <div class="body">
                                        <div class="name"><a href="#" class="text-contrast">Dorris Schmidt</a></div>
                                        <div class="actions">
                                            <a href="#" class="btn btn-link ok has-tooltip"><i class="icon-thumbs-up"></i>
                                            </a>
                                            <a href="#" class="btn btn-link remove has-tooltip"><i class="icon-thumbs-down"></i>
                                            </a>
                                        </div>
                                        <div class="text">Aut saepe maxime repellendus eveniet dicta esse similique quod et atque qui eos provident.</div>
                                    </div>
                                    <div class="text-right">
                                        <small class="date muted">
                                            <span class="timeago fade has-tooltip in">5 years ago</span>
                                            <i class="icon-time"></i>
                                        </small>
                                    </div>
                                </li>
                                <li>
                                    <div class="avatar pull-left">
                                        <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                                    </div>
                                    <div class="body">
                                        <div class="name"><a href="#" class="text-contrast">Isabell Price</a></div>
                                        <div class="actions">
                                            <a href="#" class="btn btn-link ok has-tooltip" title="Approve"><i class="icon-thumbs-up"></i>
                                            </a>
                                            <a href="#" class="btn btn-link remove has-tooltip"><i class="icon-thumbs-down"></i>
                                            </a>
                                        </div>
                                        <div class="text">Eos numquam ea veniam voluptate ullam quo explicabo et iusto ducimus voluptatibus aut consectetur.</div>
                                    </div>
                                    <div class="text-right">
                                        <small class="date muted">
                                            <span class="timeago fade has-tooltip in" title="May 30, 2013 - 22:55">5 years ago</span>
                                            <i class="icon-time"></i>
                                        </small>
                                    </div>
                                </li>
                                <li>
                                    <div class="avatar pull-left">
                                        <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                                    </div>
                                    <div class="body">
                                        <div class="name"><a href="#" class="text-contrast">Johnny Stracke</a></div>
                                        <div class="actions">
                                            <a href="#" class="btn btn-link ok has-tooltip" title="Approve"><i class="icon-thumbs-up"></i>
                                            </a>
                                            <a href="#" class="btn btn-link remove has-tooltip" title="Remove"><i class="icon-thumbs-down"></i>
                                            </a>
                                        </div>
                                        <div class="text">Consequatur id iusto minus cumque perspiciatis ipsam laboriosam aut magnam dolor sunt placeat culpa.</div>
                                    </div>
                                    <div class="text-right">
                                        <small class="date muted">
                                            <span class="timeago fade has-tooltip in" title="May 30, 2013 - 23:55">5 years ago</span>
                                            <i class="icon-time"></i>
                                        </small>
                                    </div>
                                </li>
                                <li>
                                    <div class="avatar pull-left">
                                        <div class="icon-user"></div>
                                    </div>
                                    <div class="body">
                                        <div class="name"><a href="#" class="text-contrast">Keanu Auer</a></div>
                                        <div class="actions">
                                            <a href="#" class="btn btn-link ok has-tooltip" title="Approve"><i class="icon-thumbs-up"></i>
                                            </a>
                                            <a href="#" class="btn btn-link remove has-tooltip" title="Remove"><i class="icon-thumbs-down"></i>
                                            </a>
                                        </div>
                                        <div class="text">Et voluptates adipisci rem eveniet sint nisi in sequi animi.</div>
                                    </div>
                                    <div class="text-right">
                                        <small class="date muted">
                                            <span class="timeago fade has-tooltip in" title="May 31, 2013 - 00:55">5 years ago</span>
                                            <i class="icon-time"></i>
                                        </small>
                                    </div>
                                </li>
                                <li>
                                    <div class="avatar pull-left">
                                        <div class="icon-user"></div>
                                    </div>
                                    <div class="body">
                                        <div class="name"><a href="#" class="text-contrast">Dr. Mervin D'Amore</a></div>
                                        <div class="actions">
                                            <a href="#" class="btn btn-link ok has-tooltip" title="Approve"><i class="icon-thumbs-up"></i>
                                            </a>
                                            <a href="#" class="btn btn-link remove has-tooltip" title="Remove"><i class="icon-thumbs-down"></i>
                                            </a>
                                        </div>
                                        <div class="text">Iste odio est aut ut voluptas nostrum ullam sapiente perferendis ea est.</div>
                                    </div>
                                    <div class="text-right">
                                        <small class="date muted">
                                            <span class="timeago fade has-tooltip in" title="May 31, 2013 - 01:55">5 years ago</span>
                                            <i class="icon-time"></i>
                                        </small>
                                    </div>
                                </li>
                                <li>
                                    <div class="avatar pull-left">
                                        <div class="icon-user"></div>
                                    </div>
                                    <div class="body">
                                        <div class="name"><a href="#" class="text-contrast">Mrs. Viola Towne</a></div>
                                        <div class="actions">
                                            <a href="#" class="btn btn-link ok has-tooltip" title="Approve"><i class="icon-thumbs-up"></i>
                                            </a>
                                            <a href="#" class="btn btn-link remove has-tooltip"><i class="icon-thumbs-down"></i>
                                            </a>
                                        </div>
                                        <div class="text">Fugiat est earum voluptas ipsum accusamus id quam vero molestiae praesentium magnam repellat aut.</div>
                                    </div>
                                    <div class="text-right">
                                        <small class="date muted">
                                            <span class="timeago fade has-tooltip in" title="May 31, 2013 - 02:55">5 years ago</span>
                                            <i class="icon-time"></i>
                                        </small>
                                    </div>
                                </li>
                            </ul>
                        </li>

                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                Dropdown <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Hi there!</a></li>
                            </ul>
                        </li>
                        <div class="load-more">
                            <a href="#" class="btn-block"><i class="icon-circle-arrow-down"></i>
                                Load more
                            </a>
                        </div>
                    </ul>
                </div>
            </div>
        </div>

        <div class="jumbotron">
            <h2>Chat & Quick e-mail</h2>
            <small>You can send some message in chat below!</small>
        </div>

        <div class="aside">
            <div class="aside-left aside-hide3">
                <div class="aside-left-top orange-background">
                    <div>
                        <i class="icon-comments-alt"></i>
                        Chat
                    </div>
                    <div>
                        <a class="remove8" href="#remove8"><i class="icon-remove"></i></a>
                        <a class="chevron8" href="#chevron8"><i class="icon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="scroll">
                    <ul class="unstyled ul-border list-hover list-striped">
                        <li class="message">
                            <div class="avatar">
                                <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                            </div>
                            <div class="name-and-time">
                                <div class="name pull-left">
                                    <small>
                                        <a href="#" class="text-contrast">Keith</a>
                                    </small>
                                </div>
                                <div class="time pull-right">
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in" title="May 30, 2013 - 21:04">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </div>
                            </div>
                            <div class="body">
                                Ut perferendis et voluptas voluptatem ut amet impedit velit sit.
                            </div>
                        </li>
                        <li class="message">
                            <div class="avatar">
                                <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                            </div>
                            <div class="name-and-time">
                                <div class="name pull-left">
                                    <small>
                                        <a href="#" class="text-contrast">Humberto</a>
                                    </small>
                                </div>
                                <div class="time pull-right">
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in" title="May 30, 2013 - 21:03">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </div>
                            </div>
                            <div class="body">
                                Fugit deleniti impedit eaque aut beatae blanditiis porro voluptatibus ad molestiae.
                            </div>
                        </li>
                        <li class="message">
                            <div class="avatar">
                                <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                            </div>
                            <div class="name-and-time">
                                <div class="name pull-left">
                                    <small>
                                        <a href="#" class="text-contrast">Humberto</a>
                                    </small>
                                </div>
                                <div class="time pull-right">
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in" title="May 30, 2013 - 21:02">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </div>
                            </div>
                            <div class="body">
                                Ullam dolorem pariatur amet inventore porro error.
                            </div>
                        </li>
                        <li class="message">
                            <div class="avatar">
                                <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                            </div>
                            <div class="name-and-time">
                                <div class="name pull-left">
                                    <small>
                                        <a href="#" class="text-contrast">Keith</a>
                                    </small>
                                </div>
                                <div class="time pull-right">
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in" title="May 30, 2013 - 21:01">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </div>
                            </div>
                            <div class="body">
                                Non alias et pariatur accusamus ut aut.
                            </div>
                        </li>
                        <li class="message">
                            <div class="avatar">
                                <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                            </div>
                            <div class="name-and-time">
                                <div class="name pull-left">
                                    <small>
                                        <a href="#" class="text-contrast">Humberto</a>
                                    </small>
                                </div>
                                <div class="time pull-right">
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in" title="May 30, 2013 - 21:00">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </div>
                            </div>
                            <div class="body">
                                Excepturi ratione neque velit maxime rerum mollitia libero ut et iusto sed ad.
                            </div>
                        </li>
                        <li class="message">
                            <div class="avatar">
                                <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                            </div>
                            <div class="name-and-time">
                                <div class="name pull-left">
                                    <small>
                                        <a href="#" class="text-contrast">Humberto</a>
                                    </small>
                                </div>
                                <div class="time pull-right">
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in"title="May 30, 2013 - 20:59">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </div>
                            </div>
                            <div class="body">
                                Saepe fugiat dolor necessitatibus sit non velit quia magnam et sapiente quidem libero.
                            </div>
                        </li>
                        <li class="message">
                            <div class="avatar">
                                <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                            </div>
                            <div class="name-and-time">
                                <div class="name pull-left">
                                    <small>
                                        <a href="#" class="text-contrast">Humberto</a>
                                    </small>
                                </div>
                                <div class="time pull-right">
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in" title="May 30, 2013 - 20:58">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </div>
                            </div>
                            <div class="body">
                                Voluptatibus optio sunt sed et.
                            </div>
                        </li>
                        <li class="message">
                            <div class="avatar">
                                <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                            </div>
                            <div class="name-and-time">
                                <div class="name pull-left">
                                    <small>
                                        <a href="#" class="text-contrast">Keith</a>
                                    </small>
                                </div>
                                <div class="time pull-right">
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in"title="May 30, 2013 - 20:57">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </div>
                            </div>
                            <div class="body">
                                Sunt aut.
                            </div>
                        </li>
                        <li class="message">
                            <div class="avatar">
                                <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                            </div>
                            <div class="name-and-time">
                                <div class="name pull-left">
                                    <small>
                                        <a href="#" class="text-contrast">Humberto</a>
                                    </small>
                                </div>
                                <div class="time pull-right">
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </div>
                            </div>
                            <div class="body">
                                Animi totam repellendus debitis voluptates iste dolor consequatur.
                            </div>
                        </li>
                        <li class="message">
                            <div class="avatar">
                                <img alt="Avatar" height="23" src="img/avatar.jpg" width="23">
                            </div>
                            <div class="name-and-time">
                                <div class="name pull-left">
                                    <small>
                                        <a href="#" class="text-contrast">Humberto</a>
                                    </small>
                                </div>
                                <div class="time pull-right">
                                    <small class="date pull-right muted">
                                        <span class="timeago fade has-tooltip in">5 years ago</span>
                                        <i class="icon-time"></i>
                                    </small>
                                </div>
                            </div>
                            <div class="body">
                                Ut nemo accusantium sit velit qui.
                            </div>
                        </li>
                    </ul>
                    <div class="input-group">
                        <input type="text" class="form-control" aria-label="..." placeholder="Type your new todo here...">
                        <div class="input-group-btn">
                            <button class="btn btn-success"><i class="icon-plus"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="aside-right aside-hide4">
                <div class="aside-left-top blue-background">
                    <div>
                        <i class="icon-envelope-alt"></i>
                        Quick e-mail
                    </div>
                    <div>
                        <a class="remove9" href="#remove9"><i class="icon-remove"></i></a>
                        <a class="chevron9" href="#chevron9"><i class="icon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="talk">
                    <div class="box-content">
                        <input class="span12" id="email" name="email" placeholder="E-mail" type="text" value="">
                        <ul class="wysihtml5-toolbar" style="">
                            <li class="dropdown">
                                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="icon-font"></i>&nbsp;
                                    <span class="current-font">Normal text</span>&nbsp;
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="javascript:;">Normal text</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">Heading 1</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">Heading 2</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">Heading 3</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <div class="btn-group">
                                    <a class="btn" href="javascript:;"><b>Bold</b></a>
                                    <a class="btn" href="javascript:;"><i>Italic</i></a>
                                    <a class="btn" title="CTRL+U" href="javascript:;" style="text-decoration: underline">Underline</a>
                                </div>
                            </li>
                            <li>
                                <div class="btn-group">
                                    <a class="btn" title="Unordered list" href="javascript:;"><i class="icon-list"></i></a>
                                    <a class="btn" title="Ordered list" href="javascript:;"><i class="icon-th-list"></i></a>
                                    <a class="btn" title="Outdent" href="javascript:;"><i class="icon-indent-right"></i></a>
                                    <a class="btn" title="Indent" href="javascript:;"><i class="icon-indent-left"></i></a>
                                </div>
                            </li>
                            <li>
                                <div class="bootstrap-wysihtml5-insert-link-modal modal hide fade">
                                    <div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>Insert link</h3></div>
                                    <div class="modal-body"><input value="http://" class="bootstrap-wysihtml5-insert-link-url input-xlarge"></div>
                                    <div class="modal-footer"><a href="#" class="btn">Cancel</a><a href="#" class="btn btn-primary">Insert link</a></div>
                                </div>
                                <a class="btn" title="Insert link" href="javascript:;"><i class="icon-share"></i></a>
                            </li>
                            <li>
                                <div class="bootstrap-wysihtml5-insert-image-modal modal hide fade">
                                    <div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>Insert image</h3></div>
                                    <div class="modal-body"><input value="http://" class="bootstrap-wysihtml5-insert-image-url input-xlarge"></div>
                                    <div class="modal-footer">
                                        <a href="#" class="btn">Cancel</a><a href="#" class="btn btn-primary">Insert image</a>
                                    </div>
                                </div>
                                <a class="btn" title="Insert image" href="javascript:;"><i class="icon-picture"></i></a>
                            </li>
                        </ul>
                        <textarea class="span12 wysihtml5" id="body_" name="body[]" rows="5" placeholder="Your message...">
                        </textarea>
                        <input type="hidden" name="_wysihtml5_mode" value="1">
                        <!--<iframe class="wysihtml5-sandbox"></iframe>-->
                        <div class="text-right">
                            <a href="#" class="btn btn-primary">Send</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="jumbotron">
            <h2>Calendar & Tasks</h2>
            <small>Events in calendar can be dragged from day to another day, or you can extend event on more days!</small>
        </div>

        <div class="aside">
            <div class="aside-left border-color">
                <div class="aside-left-top purple-background">
                    <div>
                        <i class="icon-calendar"></i>
                        Calendar
                    </div>
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-default">Day</button>
                        <button type="button" class="btn btn-default">Week</button>
                        <button type="button" class="btn btn-default">Month</button>
                    </div>
                </div>
                <div>

                    <div class="full">
                        <div class="full-calendar-demo fc fc-ltr">
                            <table class="fc-header" style="width:100%">
                                <tbody>
                                <tr>
                                    <td class="fc-header-center">
                                        <span class="fc-header-title"><h2>October 2018</h2></span>
                                    </td>
                                    <td class="fc-header-right">
                            <span class="fc-button fc-button-prev fc-state-default fc-corner-left">
                                <span class="icon-chevron-left"></span>
                            </span>
                                        <span class="fc-button fc-button-today fc-state-default fc-state-disabled">Today</span>
                                        <span class="fc-button fc-button-next fc-state-default fc-corner-right">
                                <span class="icon-chevron-right"></span>
                            </span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="fc-content" style="position: relative;">
                                <div class="fc-view fc-view-month fc-grid" style="position: relative; min-height: 1px; display: block;" unselectable="on">
                                    <div style="position:absolute;z-index:8;top:0;left:0">
                                        <div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end event-orange ui-draggable" style="position: absolute;left: 66px; width: 48px; top: 58px;z-index: 8;">
                                            <div class="fc-event-inner">
                                                <span class="fc-event-title">All Day Event</span>
                                            </div>
                                            <div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>
                                        </div>
                                        <div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end event-red ui-draggable" style="position: absolute;z-index: 8; left: 332px; width: 94px; top: 246px;">
                                            <div class="fc-event-inner">
                                                <span class="fc-event-title">Long Event</span>
                                            </div>
                                            <div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>
                                        </div>
                                        <div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end event-blue ui-draggable" style="position: absolute;z-index: 8; left: 6px; width: 50px; top: 288px;">
                                            <div class="fc-event-inner">
                                                <span class="fc-event-time">4p</span>
                                                <span class="fc-event-title">Repeating Event</span>
                                            </div>
                                            <div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>
                                        </div>
                                        <div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end event-orange ui-draggable" style="position: absolute;z-index: 8; left: 192px; width: 50px; top: 288px;">
                                            <div class="fc-event-inner">
                                                <span class="fc-event-time">10:30a</span>
                                                <span class="fc-event-title">Meeting</span>
                                            </div>
                                            <div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>
                                        </div>
                                        <div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end event-green" style="position: absolute;z-index: 8; left: 6px; width: 50px; top: 372px;">
                                            <div class="fc-event-inner">
                                                <span class="fc-event-time">4p</span>
                                                <span class="fc-event-title">Repeating Event</span>
                                            </div>
                                            <div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>
                                        </div>
                                        <div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end event-purple ui-draggable" style="position: absolute;z-index: 8; left: 254px; width: 50px; top: 288px;">
                                            <div class="fc-event-inner">
                                                <span class="fc-event-time">7p</span>
                                                <span class="fc-event-title">Birthday Party</span>
                                            </div>
                                            <div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>
                                        </div>
                                        <div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end event-red" style="position: absolute;z-index: 8; left: 192px; width: 50px; top: 308px;">
                                            <div class="fc-event-inner">
                                                <span class="fc-event-time">12p</span>
                                                <span class="fc-event-title">Lunch</span>
                                            </div>
                                            <div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div>
                                        </div>
                                    </div>
                                    <table class="fc-border-separate" style="width:100%">
                                        <thead>
                                        <tr class="fc-first fc-last">
                                            <th class="fc-day-header fc-sun fc-widget-header fc-first">Sun</th>
                                            <th class="fc-day-header fc-mon fc-widget-header">Mon</th>
                                            <th class="fc-day-header fc-tue fc-widget-header">Tue</th>
                                            <th class="fc-day-header fc-wed fc-widget-header">Wed</th>
                                            <th class="fc-day-header fc-thu fc-widget-header">Thu</th>
                                            <th class="fc-day-header fc-fri fc-widget-header">Fri</th>
                                            <th class="fc-day-header fc-sat fc-widget-header fc-last">Sat</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="fc-week fc-first">
                                            <td class="fc-day fc-sun fc-widget-content fc-other-month fc-first" data-date="2018-09-30">
                                                <div style="min-height: 57px;">
                                                    <div class="fc-day-number">30</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-mon fc-widget-content" data-date="2018-10-01">
                                                <div>
                                                    <div class="fc-day-number">1</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-tue fc-widget-content" data-date="2018-10-02">
                                                <div>
                                                    <div class="fc-day-number">2</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-wed fc-widget-content" data-date="2018-10-03">
                                                <div>
                                                    <div class="fc-day-number">3</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-04">
                                                <div>
                                                    <div class="fc-day-number">4</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-fri fc-widget-content" data-date="2018-10-05">
                                                <div>
                                                    <div class="fc-day-number">5</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-sat fc-widget-content fc-last" data-date="2018-10-06">
                                                <div>
                                                    <div class="fc-day-number">6</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="fc-week">
                                            <td class="fc-day fc-sun fc-widget-content fc-first" data-date="2018-10-07">
                                                <div style="min-height: 56px;">
                                                    <div class="fc-day-number">7</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 0px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-mon fc-widget-content" data-date="2018-10-08"><div>
                                                <div class="fc-day-number">8</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                            </td>
                                            <td class="fc-day fc-tue fc-widget-content" data-date="2018-10-09">
                                                <div>
                                                    <div class="fc-day-number">9</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 0px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-wed fc-widget-content" data-date="2018-10-10">
                                                <div>
                                                    <div class="fc-day-number">10</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 0px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-11">
                                                <div>
                                                    <div class="fc-day-number">11</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 0px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-fri fc-widget-content" data-date="2018-10-12">
                                                <div><div class="fc-day-number">12</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 0px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-sat fc-widget-content fc-last" data-date="2018-10-13">
                                                <div>
                                                    <div class="fc-day-number">13</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 0px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="fc-week">
                                            <td class="fc-day fc-sun fc-widget-content fc-first" data-date="2018-10-14">
                                                <div style="min-height: 56px;">
                                                    <div class="fc-day-number">14</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-mon fc-widget-content" data-date="2018-10-15">
                                                <div>
                                                    <div class="fc-day-number">15</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-tue fc-widget-content" data-date="2018-10-16">
                                                <div>
                                                    <div class="fc-day-number">16</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-wed fc-widget-content" data-date="2018-10-17">
                                                <div>
                                                    <div class="fc-day-number">17</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-18">
                                                <div>
                                                    <div class="fc-day-number">18</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-19">
                                                <div>
                                                    <div class="fc-day-number">19</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-20">
                                                <div>
                                                    <div class="fc-day-number">20</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                        <tr class="fc-week">
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-21">
                                                <div>
                                                    <div class="fc-day-number">21</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-22">
                                                <div>
                                                    <div class="fc-day-number">22</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-23">
                                                <div>
                                                    <div class="fc-day-number">23</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-24">
                                                <div>
                                                    <div class="fc-day-number">24</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-25">
                                                <div>
                                                    <div class="fc-day-number">25</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-26">
                                                <div>
                                                    <div class="fc-day-number">26</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-27">
                                                <div>
                                                    <div class="fc-day-number">27</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="fc-week">
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-28">
                                                <div>
                                                    <div class="fc-day-number">28</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-29">
                                                <div>
                                                    <div class="fc-day-number">29</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-30">
                                                <div>
                                                    <div class="fc-day-number">30</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-thu fc-widget-content" data-date="2018-10-31">
                                                <div>
                                                    <div class="fc-day-number">31</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 62px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-mon fc-widget-content fc-other-month" data-date="2018-10-01">
                                                <div>
                                                    <div class="fc-day-number">1</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-tue fc-widget-content fc-other-month" data-date="2018-10-02">
                                                <div>
                                                    <div class="fc-day-number">2</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-wed fc-widget-content fc-other-month" data-date="2018-10-03">
                                                <div>
                                                    <div class="fc-day-number">3</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        </tr>
                                        <tr class="fc-week">
                                            <td class="fc-day fc-thu fc-widget-content fc-other-month" data-date="2018-10-04">
                                                <div>
                                                    <div class="fc-day-number">4</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-fri fc-widget-content fc-other-month" data-date="2018-10-05">
                                                <div>
                                                    <div class="fc-day-number">5</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-sat fc-widget-content fc-last fc-other-month" data-date="2018-10-06">
                                                <div>
                                                    <div class="fc-day-number">6</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 41px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-sun fc-widget-content fc-first fc-other-month" data-date="2018-10-07">
                                                <div style="min-height: 56px;">
                                                    <div class="fc-day-number">7</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 0px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-mon fc-widget-content fc-other-month" data-date="2018-10-08"><div>
                                                <div class="fc-day-number">8</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                            </td>
                                            <td class="fc-day fc-tue fc-widget-content fc-other-month" data-date="2018-10-09">
                                                <div>
                                                    <div class="fc-day-number">9</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 0px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="fc-day fc-wed fc-widget-content fc-other-month" data-date="2018-10-10">
                                                <div>
                                                    <div class="fc-day-number">10</div>
                                                    <div class="fc-day-content">
                                                        <div style="position: relative; height: 0px;">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="aside-right aside-hide5">
                <div class="aside-left-top green-background">
                    <div>
                        <i class="icon-tasks"></i>
                        Tasks
                    </div>
                    <div>
                        <a class="remove10" href="#remove10"><i class="icon-remove"></i></a>
                        <a class="chevron10" href="#chevron10"><i class="icon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="bar">
                    <div class="task">
                        <span class="pull-left">
                            <a href="#">Cras sed tellus velit</a>
                        </span>
                        <small class="pull-right">40%</small>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                            <span class="sr-only">40% Complete (success)</span>
                        </div>
                    </div>
                    <div class="task">
                        <span class="pull-left">
                            <a href="#">Quis posuere tortor - maecenas in risus</a>
                        </span>
                        <small class="pull-right">80%</small>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                            <span class="sr-only">80% Complete</span>
                        </div>
                    </div>
                    <div class="task">
                        <span class="pull-left">
                            <a href="#">Donec sodales justo in lacus sagittis</a>
                        </span>
                        <small class="pull-right">58%</small>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100" style="width: 58%">
                            <span class="sr-only">58% Complete (warning)</span>
                        </div>
                    </div>
                    <div class="task">
                        <span class="pull-left">
                            <a href="#">Etiam condimentum sem nec</a>
                        </span>
                        <small class="pull-right">100%</small>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                            <span class="sr-only">100% Complete (danger)</span>
                        </div>
                    </div>
                    <div class="task">
                        <span class="pull-left">
                            <a href="#">Etiam condimentum sem nec</a>
                        </span>
                        <small class="pull-right">24%</small>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-pur" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" style="width: 24%">
                            <span class="sr-only">24% Complete (warning)</span>
                        </div>
                    </div>
                    <div class="task">
                        <span class="pull-left">
                            <a href="#">Id mi placerat</a>
                        </span>
                        <small class="pull-right">10%</small>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-gre" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
                            <span class="sr-only">10% Complete (danger)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript" src="jq/jquery.min.js"></script>
<script src="bootstrap-3/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/echarts.simple.min.js"></script>

<script>
    $(function () {
       $('.list-item').on('click',function () {
         $(this).children('ul').toggle();
           $(this).css('background','#fff');
       });
       $('.item').on('mouseover',function () {
          $(this).find('.icon-pencil').css('display','block');
           $(this).find('.icon-remove').css('display','block');
       }).on('mouseout',function () {
           $(this).find('.icon-pencil').css('display','none');
           $(this).find('.icon-remove').css('display','none');
       });
        $('.comments>li').on('mouseover',function () {
            $(this).find('.actions').css('display','block');
        }).on('mouseout',function () {
            $(this).find('.actions').css('display','none');
        });
        $('.man').on('click',function () {
            $('.users').css('display','block');
            $('.line-purple').css('display','none');
            $('.comments').css('display','none');
        });
        $('.new').on('click',function () {
            $('.users').css('display','none');
            $('.comments').css('display','block');
            $('.line-purple').css('display','block');
        });
        $('.tab').on('mouseover',function () {
            $(this).find('i').css('font-size','38px');
        }).on('mouseleave',function () {
            $(this).find('i').css('font-size','30px');
        });
        $('.remove1').on('click',function () {
           $('.left-remove').hide();
        });
        $('.remove2').on('click',function () {
            $('.right-remove').hide();
        });
        $('.chevron1>.icon-chevron-up').on('click',function () {
            $('#plug1').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
        $('.chevron2>.icon-chevron-up').on('click',function () {
            $('#plug2').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
        $('.remove3').on('click',function () {
            $('.title-left').hide();
        });
        $('.remove4').on('click',function () {
            $('.title-center').hide();
        });
        $('.remove5').on('click',function () {
            $('.title-right').hide();
        });
        $('.chevron3>.icon-chevron-up').on('click',function () {
            $('.title-left-dis').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
        $('.chevron4>.icon-chevron-up').on('click',function () {
            $('.title-center-dis').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
        $('.chevron5>.icon-chevron-up').on('click',function () {
            $('.title-right-dis').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
        $('.remove6').on('click',function () {
            $('.aside-hide1').hide();
        });
        $('.remove7').on('click',function () {
            $('.aside-hide2').hide();
        });
        $('.chevron6>.icon-chevron-up').on('click',function () {
            $('.aside-border').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
        $('.chevron7>.icon-chevron-up').on('click',function () {
            $('.aside-close').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
        $('.remove8').on('click',function () {
            $('.aside-hide3').hide();
        });
        $('.remove9').on('click',function () {
            $('.aside-hide4').hide();
        });
        $('.chevron8>.icon-chevron-up').on('click',function () {
            $('.scroll').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
        $('.chevron9>.icon-chevron-up').on('click',function () {
            $('.talk').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
        $('.remove10').on('click',function () {
            $('.aside-hide5').hide();
        });
        $('.chevron10>.icon-chevron-up').on('click',function () {
            $('.bar').toggle();
            $(this).toggleClass('icon-chevron-down');
        });
    });
</script>
<script>
    flagOne();
    flagTwo();
        function flagOne() {
            var option = {
                xAxis: {},
                yAxis: {},
                series: [{
                    data: [[0, 37000], [1.5, 31000], [2.5, 17000],[3.5,31600],[5,37000],[7,17000],[8,40000],
                        [10, 37000], [11.5, 31000], [12.5, 17000],[13.5,31600],[15,37000],[17,17000],[18,40000],
                        [20, 37000], [21.5, 31000], [22.5, 17000],[23.5,31600],[25,37000],[27,17000],[28,40000],
                        [30,25000]],
                    type: 'line',
                    color:'skyblue'
                },{
                    data: [[0, 7000], [1.5, 1000], [2.5, 7000],[3.5,1600],[5,7000],[7,7000],[8,4000],
                        [10, 3000], [11.5, 3000], [12.5, 7000],[13.5,3600],[15,3000],[17,7000],[18,4000],
                        [20, 3000], [21.5, 3100], [22.5, 1700],[23.5,3160],[25,3700],[27,1700],[28,4000],
                        [30,5000]],
                    type: 'line',
                    color:'gold'
                }]
            };
            var plug1 = echarts.init(document.getElementById('plug1'));
            plug1.setOption(option);
        }
    function flagTwo() {
        var option = {
            xAxis: {},
            yAxis: {},
            series: [{
                data: [[0, 37000], [1.5, 31000], [2.5, 17000],[3.5,31600],[5,37000],[7,17000],[8,40000],
                    [10, 37000], [11.5, 31000], [12.5, 17000],[13.5,31600],[15,37000],[17,17000],[18,40000],
                    [20, 37000], [21.5, 31000], [22.5, 17000],[23.5,31600],[25,37000],[27,17000],[28,40000],
                    [30,25000]],
                type: 'line',
                color:'red'
            },{
                data: [[0, 7000], [1.5, 1000], [2.5, 7000],[3.5,1600],[5,7000],[7,7000],[8,4000],
                    [10, 3000], [11.5, 3000], [12.5, 7000],[13.5,3600],[15,3000],[17,7000],[18,4000],
                    [20, 3000], [21.5, 3100], [22.5, 1700],[23.5,3160],[25,3700],[27,1700],[28,4000],
                    [30,5000]],
                type: 'line',
                color:'green'
            }]
        };
        var plug2 = echarts.init(document.getElementById('plug2'));
        plug2.setOption(option);
    }
</script>

</body>
</html>